<template>
  <div class="container">
    <!--轮播图start-->
    <el-carousel trigger="click" height="600px">
      <el-carousel-item v-for="url in urls" style="width:100%;height: 100%">
        <el-image
            style="width: 100%; height: 100%"
            :src="url"
            fit="cover"></el-image>
      </el-carousel-item>
    </el-carousel>
    <!--轮播图end-->
    <div class="title">
      <div>
        <img src="http://www.ai-bipet.com/skin/images/titlebgleft1.png">
        <div>
          <p>医院介绍</p>
          <p>HOSPITAL INTRODUCED</p>
        </div>

        <img src="http://www.ai-bipet.com/skin/images/titlebgright1.png">
      </div>
    </div>
    <div class="content_1">
      <div>
        <!--轮播图start-->
        <el-carousel trigger="click" height="600px">
          <el-carousel-item v-for="url in hospitalIntroductionUrls" style="width:100%;height: 100%">
            <el-image
                style="width: 100%; height: 100%"
                :src="url"
                fit="cover"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div title_2>
        <p>{{hospital}}</p>
        <p>{{hospitalIntroduct}}</p>
        <p>{{hospitalIntroductEnglish}}</p>
        <a href="#"><img src="http://www.ai-bipet.com/skin/images/icon11.png"></a>
      </div>
    </div>

    <div class="title">
      <div>
        <img src="http://www.ai-bipet.com/skin/images/titlebgleft1.png">
        <div>
          <p>医疗设备</p>
          <p>MEDICAL EQUIPMENT</p>
        </div>
        <img src="http://www.ai-bipet.com/skin/images/titlebgright1.png">
      </div>
    </div>
    <div class="content_2">
      <img :src="leftImage"  @click="leftSlide">
      <div class="content_2_1">
        <div :style="slideObj.slideStyle">
          <div class="content_2_1_1" v-for="e in medicalEquipmentArr">
            <el-card :body-style="{ padding: '0px' }">
              <el-image
                  style="width: 100%;height: 431px;"
                  :src="e.url"
                  fit="cover"
              ></el-image>
              <p>{{e.name}}</p>
            </el-card>
          </div>
        </div>
      </div>
      <img :src="rightImage" @click="rightSlide">
    </div>
    <div class="content_3">
      <div class="title">
        <div>
          <img src="http://www.ai-bipet.com/skin/images/titlebgleft2.png">
          <div>
            <p style="color: white">医疗团队</p>
            <p style="color: white">EXPERT TEAM</p>
          </div>
          <img src="http://www.ai-bipet.com/skin/images/titlebgright2.png">
        </div>
      </div>
      <div class="content_3_1">
        <div class="content_3_1_1">
          <div></div>
          <div></div>
          <div></div>
          <div>
            <div class="content_3_1_1_1" v-for="e in picUrls">
              <div :class="e.operator">
                <el-image
                    style="width: 100%;height: 100%"
                    :src="e.url"
                    fit="cover"></el-image>
              </div>
            </div>
          </div>
          <div></div>
        </div>
        <div class="content_3_1_2">
          <div>
            <div @click="switchPic(1)">
              <img src="http://www.ai-bipet.com/skin/images/icon12.png">
            </div>
            <div @click="switchPic(2)">
              <img src="http://www.ai-bipet.com/skin/images/icon13.png">
            </div>
          </div>
        </div>
        <div class="content_3_1_3">
          <div>
            <p>{{picUrls[0].name}}</p>
            <p>{{picUrls[0].educational}}<br>{{picUrls[0].educational2}}<br>{{picUrls[0].detail}}</p>
            <a href="#"><img src="http://www.ai-bipet.com/d/file/p/2017-12-26/9cc7e1169cc97d72b620a1020e5b5e9c.png"></a>
          </div>
        </div>
      </div>
    </div>
    <div class="title">
      <div>
        <img src="http://www.ai-bipet.com/skin/images/titlebgleft1.png">
        <div>
          <p>新闻动态</p>
          <p>NEWS</p>
        </div>
        <img src="http://www.ai-bipet.com/skin/images/titlebgright1.png">
      </div>
    </div>
    <div class="content_4">
      <el-radio-group class="content_4_1" v-model="tabPosition" style="margin-bottom: 30px;">
        <el-radio-button label="left">
          <p style="font-size: 15px">公司动态</p>
          <p style="font-size: 12px;margin-top: 10px">COMPANY DYNAMIC</p>
        </el-radio-button>
        <el-radio-button label="right">
          <p style="font-size: 15px">分院动态</p>
          <p style="font-size: 12px;margin-top: 10px">SORTING OF DYNAMIC</p>
        </el-radio-button>
      </el-radio-group>
      <div class="content_4_2" :tab-position="tabPosition">
        <div v-if="tabPosition=='left'" v-for="e in companyUrls">
          <el-image v-if="e.type==1"
                    style="width: 300px;height: 180px"
                    :src="e.url"
                    fit="cover"></el-image>
          <div class="content_4_2_1" v-if="e.type==2">
            <div>
              <span>{{e.day}}</span>
              <p>{{e.date}}</p>
            </div>
            <p>{{e.name}}</p>
            <hr style="border-top-color: #555;width: 2em;margin-top: 10px">
            <p>{{e.detail}}</p>
          </div>
        </div>
        <div v-if="tabPosition=='right'" v-for="e in departUrls">
          <el-image v-if="e.type==1"
                    style="width: 300px;height: 180px"
                    :src="e.url"
                    fit="cover"></el-image>
          <div class="content_4_2_1" v-if="e.type==2">
            <div>
              <span>{{e.day}}</span>
              <p>{{e.date}}</p>
            </div>
            <p>{{e.name}}</p>
            <hr style="border-top-color: #555;width: 2em;margin-top: 10px">
            <p>{{e.detail}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="content_5">
      <div class="title">
        <div>
          <img src="http://www.ai-bipet.com/skin/images/titlebgleft1.png">
          <div>
            <p>经典案例</p>
            <p>CLASSIC CASE</p>
          </div>
          <img src="http://www.ai-bipet.com/skin/images/titlebgright1.png">
        </div>
      </div>
      <!--轮播图start-->
      <div class="content_5_1">
        <el-carousel trigger="click" height="373px" width="1190px">
          <el-carousel-item  id="content_5_1_1" v-for="eurls in caseUrls" shadow="hover" style="width:100%;height: 100%">
            <div>
              <el-card v-for="e in eurls" :body-style="{ padding: '0px' }" shadow="hover">
                <el-image
                    style="width: 100%;height: 212px"
                    :src="e.url"
                    fit="cover"></el-image>
                <p>{{e.name}}</p>
                <hr style="margin: 0 10px">
                <p>{{e.detail}}</p>
                <div><a href="#">了解详情</a></div>
              </el-card>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      slideObj: {
        cardWidth: 431,
        screen: 3 * 431,
        distanceTotal: 1293,
        distanceLeft: 0,
        distanceRight: 0,
        slideStyle: "",
      },
      leftImage: "http://www.ai-bipet.com/skin/images/icon9.png",
      rightImage: "http://www.ai-bipet.com/skin/images/icon10.png",
      hospital: "艾贝尔宠物医院",
      hospitalIntroduct: "艾贝尔宠物医院是国内专业宠物全诊疗连锁机构，在全国各地分布几十家全资宠物医院,主要分布在江、浙、沪等长三角经济最活跃的大中城市。每家医院营业面积都超过200平方米,多家医院已成为当地中心医院、转诊目的地医院。 公司年产总值每年都在高速增长。\n" +
          "                        艾贝尔拥有上百位优秀的宠物医生团队，中心医院都配备有数码X光机、彩色B超、五分类血细胞分析仪、血液透析机等先进的诊疗设备。\n" +
          "                        管理领先——艾贝尔宠物医院实行公司化运作、规范性收费，到任何一家艾贝尔医院都会让您的爱宠放心就诊.....",
      hospitalIntroductEnglish: "Ai-bi pet hospital is a professional pet hospital with total subject diagnosis and treatment organization in China. It distributes dozens of wholly owned pet hospitals throughout the country, mainly in the large and medium-sized cities of Yangtze River Delta such as Shanghai ,Jiangsu and Zhejiang.The average operating areas of the hospital is more than 200 square meters, and many hospitals have became the local central hospitals and referral destination hospitals.The annual output value is increasing every year.....",
      tabPosition: 'left',
      urls:["http://www.ai-bipet.com/skin/images/banner.jpg", "http://www.ai-bipet.com/skin/images/banner1.jpg"],
      hospitalIntroductionUrls: ["http://www.ai-bipet.com/skin/images/ab1.jpg",
        "http://www.ai-bipet.com/skin/images/ab2.jpg",
        "http://www.ai-bipet.com/skin/images/ab3.jpg",
        "http://www.ai-bipet.com/skin/images/ab4.jpg"],
      caseUrls: [
        [
          {id: 1, name: "一例由未牵狗绳导致的骨折案例", url: "http://www.ai-bipet.com/d/file/Pet-care/case/2018-12-13/6a2d0447c54477903205f9131b7e595f.png", detail: "小狗旺旺，车祸导致全身多处骨折，但是旺旺一直很坚强，很努力，术后第二天就有主动进食的欲望，术后第三天就自己努力站立，加上小艾的护士们的尽心护理，旺旺从最初由于疼痛而警惕到最后与护士们的相互信任。"},
          {id: 2, name: "一例犬子宫蓄脓并发胰腺炎及肾功能损伤的病例报告", url: "http://www.ai-bipet.com/d/file/Pet-care/case/2017-11-07/20e343116d87b516b858d1a5ec7d3bdb.jpg", detail: "子宫蓄脓常因子宫内分泌环境改变（永久性黄体）和细菌感染（大肠杆菌等）引起，通常动物表现呕吐、体液丢失、电解质平衡失调，严重至休克败血症。机体循环血量减少，血容量不足，多导致急性缺血引起肾功能损伤。平时高脂高蛋白摄入和剧烈呕吐易引起胰腺损伤。"},
          {id: 3, name: "一例疑似PRAA病例的诊断治疗", url: "http://www.ai-bipet.com/d/file/Pet-care/case/2017-11-07/8f2e44f73abba48d6d47a629dc204676.jpg", detail: "本院5月份收治一流浪猫，平时住楼道，好心人喂养，没有特别关心，亦未发现异常。年龄1岁，体重3.5kg，刚生小猫三天，生小猫前两天发现呕吐，精神一般，生小猫后呕吐症状未见减轻，食欲废绝，精神差，被毛凌乱，营养状况很差，偏瘦。临床检查体温高达40度，呼吸急促，不愿走动，也不愿意喂奶。检查猫瘟阴性，X光平片检查未见明显异常，生化、血常规、血气结果如下表1、2、3"},
          {id: 4, name: "一例肝癌晚期病犬的病例", url: "http://www.ai-bipet.com/d/file/Pet-care/case/2017-11-07/cc0209f60b4415070e7cfda90309aa29.jpg", detail: "2017-8-27门诊上接诊一例金毛犬，3岁，雌性，一岁时生过一窝小狗，平时以犬粮为主食。根据主人交代该犬在3个月前，送到乡下一朋友处饲养，于2周前接回。因为该犬最近腹围增大，呈圆筒状，口色变淡，鼻镜干燥，体温在40度以上，俯卧的时候总是在哼唧，用手可以在前腹部摸到较大的肿块。发病前体重在34kg左右，目前体重为33kg，在本市的一家宠物医院拍X光检查，由于拍摄参数没设好，拍的片子没能给出准确结果，只是说腹腔有异物。于是来我院希望得到一个确切的诊断结果。"},
        ],
        [
          {id: 5, name: "长骨常见简单骨折手术修复", url: "http://www.ai-bipet.com/d/file/Pet-care/case/2017-10-13/a4301238bd72cc4bfb09e78106968527.jpg", detail: "ALPS（Advanced  locking plate system）或PRCLS （Point touch reconstruct compress locking system）随着成本的降低及先进技术的普及，越来越多的应用于小动物临床。1、质量轻、强"},
          {id: 6, name: "骨盆骨折的手术修复", url: "http://www.ai-bipet.com/d/file/Pet-care/case/2017-10-13/03389b76bf14d2fc5193aad580702f72.jpg", detail: "骨盆骨折常见严重的创伤如高空跌落、车祸等，常常不止一处骨折，较长骨骨折难度大、并发症多，常见骨盆损伤为髂骨骨折、髋臼骨折、骨盆边缘骨折、荐髂关节脱位及股骨头脱位。"},
          {id: 7, name: "SUB System 皮下输尿管绕道装置系统/人工输尿管", url: "http://www.ai-bipet.com/d/file/Pet-care/case/2017-10-13/3e999e5dacce69f769846289983741d6.jpg", detail: "皮下输尿管绕道装置系统，又称经皮输尿管旁路系统、肾脏/膀胱造口置管术，在人医bypass system已经广泛的使用在输尿管肿瘤、输尿管支架失效、常规手术无法解决的病人，随着兽医水平提高，SUB越来越多的应用于宠物。"},
          {id: 8, name: "一例犬伊维菌素治疗蠕形螨中毒致失明的病例报告", url: "http://www.ai-bipet.com/d/file/Pet-care/case/2017-12-07/d93353012496dd740af9fee30dfe99b6.jpg", detail: "2017-8-27门诊上接诊一例金毛犬，3岁，雌性，一岁时生过一窝小狗，平时以犬粮为主食。根据主人交代该犬在3个月前，送到乡下一朋友处饲养，于2周前接回。因为该犬最近腹围增大，呈圆筒状，口色变淡，鼻镜干燥，体温在40度以上，俯卧的时候总是在哼唧，用手可以在前腹部摸到较大的肿块。发病前体重在34kg左右，目前体重为33kg，在本市的一家宠物医院拍X光检查，由于拍摄参数没设好，拍的片子没能给出准确结果，只是说腹腔有异物。于是来我院希望得到一个确切的诊断结果。"},
        ]
      ],
      companyUrls: [
        {id: 1, type: 1, url: "http://www.ai-bipet.com/d/file/news/company-dynamic/2018-04-25/dfbd8bee679d51a3ed54042e13654652.png"},
        {id: 2, type: 2, name: "国际兽医学院——肿瘤学课程培训圆满结束", detail: "2018年4月16日—18日，为使员工可以掌握更坚实的肿瘤学基础知识、在临床中可以正确有信心的诊断及应用化学疗法治疗犬猫常见的肿瘤疾病及副作用的控制与管理，特邀伊利诺伊大学厄巴纳—香槟分校临床兽医学博士、ACVIM小动物肿瘤学专科医师Rodriguez博士，在南京金丝丽喜来登酒店进行了为期3天的肿瘤学专题培训。", date: "2022-06", day: "22"},
        {id: 3, type: 1, url: "http://www.ai-bipet.com/d/file/news/company-dynamic/2018-02-09/2c1d44c918e2be60ae9836cc346f9fe6.jpg"},
        {id: 4, type: 2, name: "国际兽医学院——肿瘤学课程培训圆满结束", detail: "2018年4月16日—18日，为使员工可以掌握更坚实的肿瘤学基础知识、在临床中可以正确有信心的诊断及应用化学疗法治疗犬猫常见的肿瘤疾病及副作用的控制与管理，特邀伊利诺伊大学厄巴纳—香槟分校临床兽医学博士、ACVIM小动物肿瘤学专科医师Rodriguez博士，在南京金丝丽喜来登酒店进行了为期3天的肿瘤学专题培训。", date: "2022-06", day: "22"},
        {id: 5, type: 2, name: "国际兽医学院——肿瘤学课程培训圆满结束", detail: "2018年4月16日—18日，为使员工可以掌握更坚实的肿瘤学基础知识、在临床中可以正确有信心的诊断及应用化学疗法治疗犬猫常见的肿瘤疾病及副作用的控制与管理，特邀伊利诺伊大学厄巴纳—香槟分校临床兽医学博士、ACVIM小动物肿瘤学专科医师Rodriguez博士，在南京金丝丽喜来登酒店进行了为期3天的肿瘤学专题培训。", date: "2022-06", day: "22"},
        {id: 6, type: 1, url: "http://www.ai-bipet.com/d/file/news/company-dynamic/2018-04-23/82e0f985f45903389fcb6cfd1c1ee10c.png"},
        {id: 7, type: 2, name: "国际兽医学院——肿瘤学课程培训圆满结束", detail: "2018年4月16日—18日，为使员工可以掌握更坚实的肿瘤学基础知识、在临床中可以正确有信心的诊断及应用化学疗法治疗犬猫常见的肿瘤疾病及副作用的控制与管理，特邀伊利诺伊大学厄巴纳—香槟分校临床兽医学博士、ACVIM小动物肿瘤学专科医师Rodriguez博士，在南京金丝丽喜来登酒店进行了为期3天的肿瘤学专题培训。", date: "2022-06", day: "22"},
        {id: 8, type: 1, url: "http://www.ai-bipet.com/d/file/news/sorting-of-dynamic/2017-11-30/6c63a1c5f0a374ee92ebe5d50bd6b442.jpg"}
      ],
      departUrls: [
        {id: 1, type: 1, url: "http://www.ai-bipet.com/d/file/news/sorting-of-dynamic/2018-02-05/137a50a70884ef63b3cdbd3227802767.jpg"},
        {id: 2, type: 2, name: "艾贝尔宠物医院上元大街店盛大开业", detail: "2017年12月9日上午9时，艾贝尔宠物医院上元大街店在公司领导的支持和关怀下盛大开业了。在吕会影院长的带领下医院各医护人员迅速的投入到了各自的工作中去，为医院的发展作出自己的一份贡献。", date: "2022-06", day: "22"},
        {id: 3, type: 1, url: "http://www.ai-bipet.com/d/file/news/sorting-of-dynamic/2017-12-28/ce0ff8545332dad50f7db1b9bc75b0ad.png"},
        {id: 4, type: 2, name: "国际兽医学院——肿瘤学课程培训圆满结束", detail: "2018年4月16日—18日，为使员工可以掌握更坚实的肿瘤学基础知识、在临床中可以正确有信心的诊断及应用化学疗法治疗犬猫常见的肿瘤疾病及副作用的控制与管理，特邀伊利诺伊大学厄巴纳—香槟分校临床兽医学博士、ACVIM小动物肿瘤学专科医师Rodriguez博士，在南京金丝丽喜来登酒店进行了为期3天的肿瘤学专题培训。", date: "2022-06", day: "22"},
        {id: 5, type: 2, name: "国际兽医学院——肿瘤学课程培训圆满结束", detail: "2018年4月16日—18日，为使员工可以掌握更坚实的肿瘤学基础知识、在临床中可以正确有信心的诊断及应用化学疗法治疗犬猫常见的肿瘤疾病及副作用的控制与管理，特邀伊利诺伊大学厄巴纳—香槟分校临床兽医学博士、ACVIM小动物肿瘤学专科医师Rodriguez博士，在南京金丝丽喜来登酒店进行了为期3天的肿瘤学专题培训。", date: "2022-06", day: "22"},
        {id: 6, type: 1, url: "http://www.ai-bipet.com/d/file/news/sorting-of-dynamic/2018-02-01/e9d649ff5947c1cc64ddd832075f72c1.png"},
        {id: 7, type: 2, name: "国际兽医学院——肿瘤学课程培训圆满结束", detail: "2018年4月16日—18日，为使员工可以掌握更坚实的肿瘤学基础知识、在临床中可以正确有信心的诊断及应用化学疗法治疗犬猫常见的肿瘤疾病及副作用的控制与管理，特邀伊利诺伊大学厄巴纳—香槟分校临床兽医学博士、ACVIM小动物肿瘤学专科医师Rodriguez博士，在南京金丝丽喜来登酒店进行了为期3天的肿瘤学专题培训。", date: "2022-06", day: "22"},
        {id: 8, type: 1, url: "http://www.ai-bipet.com/d/file/news/company-dynamic/2018-01-29/617f6645eb7f9ab8721f94fbf7f99e81.png"}
      ],
      picUrls: [
        {id: 1, operator: "extend", name: "柯肖", educational: "南京农业大学农学博士", educational2: "中国畜牧兽医学会兽医外科学分会理事", detail: "", url: "http://www.ai-bipet.com/d/file/Pet-care/medical-team/2018-12-12/7ef828d34093914145e84fb6ca14e3fc.png", },
        {id: 2, operator: "normal", name: "利雷", educational: "南京农业大学动物医学本科", educational2: "南京农业大学临床兽医硕士", detail: "", url: "http://www.ai-bipet.com/d/file/Pet-care/medical-team/2017-10-09/8da5b4bce79c4eeb5015e02bd67d5a5c.jpg"},
        {id: 3, operator: "reduce", name: "王亮", educational: "东北农业大学动物医学学士", educational2: "中国农业大学（学科）研究生", detail: "多年欧洲兽医高级学院心脏病、牙科、猫科学学习。\n" +
              "擅长内科病，在心脏、肾脏、肝脏，胰腺等疾病。犬急性肾衰竭成功输液治愈病例；诊断和治愈了多例肝衰和肾衰并发、胰腺炎和肾衰并发、急性干衰吐血等疑难病例。", url: "http://www.ai-bipet.com/d/file/Pet-care/medical-team/2017-10-09/773a5122f9fd01545fb56b7117b2f6c3.jpg"},
      ],
      medicalEquipmentArr: [
        {id: 1, name: "立体等像素16层螺旋CT", url: "http://www.ai-bipet.com/d/file/Pet-care/medical-equipment/2018-12-18/c71d4069f52c33481c97892e49aba1dc.jpg"},
        {id: 2, name: "联影uMR 560磁共振系统", url: "http://www.ai-bipet.com/d/file/Pet-care/medical-equipment/2018-12-18/b35b166b323465f6c1f9a77c4737dc54.jpg"},
        {id: 3, name: "内分泌及快速检测试剂分析仪", url: "http://www.ai-bipet.com/d/file/Pet-care/medical-equipment/2017-09-25/d14e7cec70a673df9609723f86e7ab45.jpg"},
        {id: 4, name: "尿液分析仪", url: "http://www.ai-bipet.com/d/file/Pet-care/medical-equipment/2017-09-25/7416ef08520e706239ba3711f3b591ec.jpg"},
        {id: 5, name: "全自动生化分析仪", url: "http://www.ai-bipet.com/d/file/Pet-care/medical-equipment/2017-09-25/e7f3489fb98212cdcc4068fbe90c2781.jpg"},
        {id: 6, name: "多普勒超声诊断系统", url: "http://www.ai-bipet.com/d/file/Pet-care/medical-equipment/2018-05-18/e2787cb869c2271e98b4b086960baf81.png"},
        {id: 7, name: "全自动血细胞分析仪", url: "http://www.ai-bipet.com/d/file/Pet-care/medical-equipment/2017-09-25/dfc9cb4953db0641247d56b830e09378.jpg"},
      ]
    };
  },
  methods: {
    leftSlide() {
      this.slideObj.distanceTotal = this.medicalEquipmentArr.length * this.slideObj.cardWidth;     //总长度
      this.slideObj.distanceLeft = this.slideObj.distanceTotal - this.slideObj.distanceRight - this.slideObj.screen;  //剩余长度
      let distance = 0
      if (this.slideObj.distanceLeft >= 3 * this.slideObj.cardWidth) {
        distance = 3 * this.slideObj.cardWidth
      } else if (this.slideObj.distanceLeft == 2 * this.slideObj.cardWidth) {
        distance = 2 * this.slideObj.cardWidth
      } else if (this.slideObj.distanceLeft == this.slideObj.cardWidth) {
        distance = this.slideObj.cardWidth
      }
      this.slideObj.distanceLeft -= distance
      this.slideObj.distanceRight += distance
      console.log("slideObj.distanceLeft = " + this.slideObj.distanceLeft)
      this.slideObj.slideStyle = "margin-left: -" + this.slideObj.distanceLeft + "px";
    },
    rightSlide() {
      this.slideObj.distanceTotal = this.medicalEquipmentArr.length * this.slideObj.cardWidth;     //总长度
      this.slideObj.distanceRight = this.slideObj.distanceTotal - this.slideObj.distanceLeft - this.slideObj.screen;  //剩余长度
      let distance = 0
      if (this.slideObj.distanceRight >= 3 * this.slideObj.cardWidth) {
        distance = 3 * this.slideObj.cardWidth
      } else if (this.slideObj.distanceRight == 2 * this.slideObj.cardWidth) {
        distance = 2 * this.slideObj.cardWidth
      } else if (this.slideObj.distanceRight == this.slideObj.cardWidth) {
        distance = this.slideObj.cardWidth
      }
      this.slideObj.distanceLeft += distance
      this.slideObj.distanceRight -= distance
      this.slideObj.slideStyle = "margin-left: -" + this.slideObj.distanceLeft + "px";
    },
    leftEnter() {
      this.leftImage = "http://www.ai-bipet.com/skin/images/icon9s.png"
    },
    leftOut() {
      this.leftImage = "http://www.ai-bipet.com/skin/images/icon9.png"
    },
    rightEnter() {
      this.rightImage = "http://www.ai-bipet.com/skin/images/icon10s.png"
    },
    rightOut() {
      this.rightImage = "http://www.ai-bipet.com/skin/images/icon10.png"
    },
    switchPic(type) {
      let arr = this.picUrls
      switch (type) {
        case 1:
          let oldfirst = arr.splice(0, 1)[0]
          oldfirst.operator = "reduce"
          arr.push(oldfirst)
          let newFirst = arr[0]
          newFirst.operator = "extend"
          break;
        case 2:
          let first = arr[0]
          first.operator = "reduce"
          let last = arr.pop()
          last.operator = "extend"
          arr.unshift(last)
          break;
      }
    }
  }
}
</script>

<style>
.title{
  display: -webkit-flex;
  display: flex;
  height: 170px;
  align-items: center;
}
.title>div{
  display: inline-block;
  margin: 0 auto;
}
.title>div>div{
  display: inline-block;
  text-align: center;
}
.title p:first-child{
  color: #1d1d1d;
  font-size: 22px;
}
.title p:last-child{
  color: #666;
  font-size: 14px;
  margin-top: 40px;
  text-decoration: underline;
}
.content_1{
  display: -webkit-flex;
  display: flex;
  height: 600px;
}
.content_1>div:first-child{
  flex: 1;
  background-color: #009eb6;
}
.content_1>div:last-child{
  flex: 1;
  color: white;
  background-color: #1f62a1;
  padding: 0 20px 0 30px;
}
.content_1 p{
  width: 500px;
}
.content_1 p:first-child{
  margin: 50px 0px 20px;
  font-size: 17px;
}
.content_1 p:nth-child(2){
  margin-top: 20px;
  font-size: 14px;
  line-height: 24px;
}
.content_1 p:nth-child(3){
  margin-top: 20px;
  font-size: 14px;
  line-height: 24px;
}
.content_1 a{
  display: inline-block;
  padding: 20px 0;
}

.content_2{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1395px;
  height: 431px;
  margin: 0 auto;
}
.content_2>div{
  height: 431px;
  width: 100%;
  margin: 0 15px;
  overflow: hidden;
}
.content_2_1 {
  height: 100%;
}
.content_2_1>div{
  display: flex;
  width: 5000px;
  height: 100%;
  transition: ease-out 0.5s;
}
.content_2_1_1{
  height: 100%;
  overflow: hidden;
}
.content_2_1_1>.el-card{
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 30px;
  overflow: hidden;
}
.content_2_1_1 img{
  transition: ease-out 0.5s;
}
.content_2_1_1 img:hover{
  /*width: 110%;*/
  /*height: 110%;*/
  transform: scale(1.2,1.2);
  transition: ease-out 0.5s;
}
.content_2_1_1 p{
  width: 100%;
  height: 60px;
  background-color: rgba(17,89,148,0.7);
  position: absolute;
  bottom: 0;
  left: 0;
  color: white;
  font-size: 13px;
  text-align: center;
  line-height: 60px;
}

.content_3{
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 860px;
  margin-top: 100px;
  background-image: url("http://www.ai-bipet.com/skin/images/index2.jpg");
  background-position: center;
  background-repeat: no-repeat;
}
.content_3_1{
  position: relative;
  width: 1200px;
  height: 607px;
  background-color: rgba(0,0,0,0.33);
}
.content_3_1>div:first-of-type{
  position: absolute;
  top: 230px;
  left: 40px;
  width: 325px;
  height: 280px;
  border: 2px solid white
}
.content_3_1_1>div:first-of-type{
  position: absolute;
  top: -50px;
  right: -50px;
  width: 325px;
  height: 280px;
  background-color: #B5B7C6;
}
.content_3_1_1>div:nth-of-type(2){
  position: absolute;
  top: -50px;
  right: -50px;
  width: 325px;
  height: 280px;
  background-color: #B5B7C6;
}
.content_3_1_1>div:nth-of-type(3){
  position: absolute;
  top: -60px;
  right: -60px;
  width: 325px;
  height: 280px;
  background-color: #515473;
}
.content_3_1_1>div:nth-of-type(4){
  position: absolute;
  top: -70px;
  right: -70px;
  width: 325px;
  height: 280px;
  border: 1px solid yellow;
}
.content_3_1_1_1{
  position: absolute;
  top: 0;
  left: 0;
}
.content_3_1_1>div:last-of-type{
  position: absolute;
  top: -70px;
  right: -70px;
  width: 325px;
  height: 280px;
  background-color: rgba(0,0,0,0.33);
}
.content_3_1_2{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  width: 632px;
  height: 547px;
  border: 1px solid red;
}
.content_3_1_2>div{
  position: absolute;
  top: 265px;
  left: -80px;
  display: flex;
  justify-content: space-around;
  width: 160px;
  height: 80px;
  background-color: rgba(102,98,121, 0.33);
  z-index: 500;
}
.content_3_1_2>div>div:first-of-type{
  flex: 1;
  height: 80px;
  text-align: center;
  line-height: 80px;
}
.content_3_1_2>div>div:last-of-type {
  flex: 1;
  height: 80px;
  text-align: center;
  line-height: 80px;
}
.content_3_1_3{
  position: absolute;
  right: 0;
  top: 74px;
  margin: 0 auto;
  width: 360px;
  height: 428px;
  background-color: #2161A0;
  z-index: 600;
}
.content_3_1_3>div{
  position: relative;
  height: 100%;
  padding: 15px;
}
.content_3_1_3>div>p:first-of-type{
  width: 95px;
  height: 50px;
  margin-top: 45px;
  margin-left: -62px;
  color: #333;
  font-size: 16px;
  background-color: white;
  text-align: center;
  line-height: 50px;
}
.content_3_1_3>div>p:nth-of-type(2){
  margin-top: 30px;
  color: white;
  font-size: 12px;
  line-height: 24px;
}
.content_3_1_3>div>a{
  position: absolute;
  bottom: 0;
  margin-bottom: 50px;
}
.extend{
  position: relative;
  left: 175px;
  top: -163px;
  width: 632px;
  height: 547px;
  border: 1px solid blue;
  z-index: 100;
}
.normal{
}
.reduce{
}
.content_4{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 540px;

}
.content_4_1{
  color: #033;
  background-color: #003333;
}
.content_4_2{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 1300px;
}
.content_4_2>div>div{
  width: 300px;
  height: 180px;
}
.content_4_2_1{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 180px;
  padding-left: 24px;
  padding-right: 19px;
}
.content_4_2_1:hover{

}
.content_4_2>div{
  position: relative;
  color: #9a9a9a;
  height: 180px;
}
.content_4_2_1>div>span{
  font-size: 48px;
}
.content_4_2_1>div>p{
  position: absolute;
  left: 52px;
  top: 28px;
  font-size: 12px;
  padding: 1px;
  background-color: white;
}
.content_4_2_1>p{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 10px;
  line-height: 24px;
}
.content_4_2_1>p:first-of-type{
  -webkit-line-clamp: 1;
  font-size: 15px;
  color: #333;
}
.content_4_2_1>p:last-of-type{
  -webkit-line-clamp: 2;
  font-size: 12px;
  color: #666;
}
.content_5{
  display: flex;
  flex-direction: column;
  height: 575px;
  align-items: center;
  margin: 0 auto;
  background-image: url("http://www.ai-bipet.com/skin/images/index4.jpg");
  background-repeat: no-repeat;
  background-position: center;
}
.content_5_1{
  width: 1190px;
  height: 100%;
  font-size: 13px;
}
#content_5_1_1>div{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
}
#content_5_1_1 .el-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  width: 272px;
  height: 373px;
  margin: 0 15px;
}
#content_5_1_1 p{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#content_5_1_1 p:first-of-type{
  -webkit-line-clamp: 1;
  margin: 10px;
  color: #333;
  font-size: 15px;
}
#content_5_1_1 p:last-of-type{
  -webkit-line-clamp: 2;
  margin: 10px 15px;
  color: #666;
  font-size: 13px;
}
#content_5_1_1 .el-card a:link{
  color: #fe4b4b;
  display: inline-block;
  margin: 0 auto;
}
#content_5_1_1 .el-card>div:last-of-type{
  text-align: center;
}
</style>